import React from 'react';
import {
  ModalForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-form';
import ProFormItem from "@ant-design/pro-form/lib/components/FormItem";
import {Input} from "antd";


export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.RuleListItem>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  return (
    <ModalForm
      width={640}
      modalProps={{
        onCancel: () => {
          props.onCancel();
        },
        destroyOnClose: true,
      }}
      title="修改"
      visible={props.updateModalVisible}
      onFinish={props.onSubmit}
      initialValues={{
        id: props.values.id,
        username: props.values.username,
        nickname: props.values.nickname,
        phone: props.values.phone,
        sex: parseInt(props.values.sex).toString(),
        status: parseInt(props.values.status).toString(),
        sort: props.values.sort,
      }}
    >
      <ProFormText
        width="sm"
        name="id"
        disabled
        hidden
      />
      <ProFormText
        label="用户名"
        width="md"
        name="username"
        rules={[
          {
            required: true,
            message: '不能为空',
          },
        ]}
      />
      <ProFormText
        label="真实姓名"
        width="md"
        name="nickname"
      />
      <ProFormItem
        name="password"
        label="密码"
        style={{width:"70%"}}
        hasFeedback
      >
        <Input.Password />
      </ProFormItem>
      <ProFormItem
        name="confirm"
        label="确认密码"
        dependencies={['password']}
        hasFeedback
        style={{width:"70%"}}
        rules={[
          {
            message: '请再次输入密码',
          },
          ({ getFieldValue }) => ({
            validator(rule, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject('第二次输入密码与第一次不一致');
            },
          }),
        ]}
      >
        <Input.Password />
      </ProFormItem>
      <ProFormSelect
        name="sex"
        width="sm"
        label="性别"
        valueEnum={{0:'未知',1:'男',2:'女'}}
        initialValue={'0'}
      />
      <ProFormSelect
        name="status"
        width="sm"
        label="状态"
        valueEnum={{
          0: '禁用',
          1: '正常',
        }}
      />
      <ProFormText
        label="手机号"
        width="sm"
        name="phone"
      />
    </ModalForm>
  );
};

export default UpdateForm;
